.container{
  padding-bottom: 56px;
  background-color: #F0F2F5;

  .box{
    display: flex;
    margin: 20px auto;
    width: 78%;

    &-main{
      position: relative;
      top: 56px;
      width: 74%;
      margin-right: 20px;

      &-top{
        border-radius: 20px;
        background-color: #fff;
        margin-bottom: 20px;
        padding: 20px;

        &-content{
          &-img{
            width: 78px;
            height: 78px;
            border-radius: 10px;
          }

          &-labels{
            display: flex;
            flex-wrap: wrap;
            font-size: 14px;
            color: #029cd4;
            margin-top: 12px;

            &-item{
              display: flex;
              align-items: center;
              margin-right: 14px;

              span{
                margin-left: 2px;
              }
            }
          }

          &-categorys{
            display: flex;
            flex-wrap: wrap;
            font-size: 14px;
            color: #f5ba18;
            margin-top: 12px;

            &-item{
              display: flex;
              align-items: center;
              margin-right: 14px;

              span{
                margin-left: 2px;
              }
            }
          }
        }

        .t-space{
          width: 100%;
        }

        &-btns{
          margin-bottom: 12px;
          width: 100%;

          &-hello{
            letter-spacing: 0.02em;
            text-align: end;
            display: flex;
            justify-content: end;
            align-items: center;
          }
        }

        &-bottom{
          margin-top: 6px;
          width: 100%;
          position: relative;

          &-left{
            display: flex;
            justify-content: start;
            align-items: center;

            &-item{
              display: flex;
              align-items: center;
              margin-right: 8px;
              cursor: pointer;
            }
          }

          &-btn{
            position: absolute;
            right: 0;
            bottom: -5px;
            width: 66px;
            letter-spacing: 0.08em;
          }
        }
      }

      &-content{
        border-radius: 20px 20px 0 0;
        background-color: #fff;

        .t-tabs{
          border-radius: 20px;
        }

        &-item{
          padding: 20px;

          &-reply{
            margin-top: 24px;
            padding: 0 40px;

            &-top{
              margin-bottom: 16px;
              display: flex;

              &-avatar{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin-right: 12px;
              }
            }

            &-shit{
              position: relative;
              display: flex;

              &-content{
                margin-right: 8px;
                width: 68%;
                display: -webkit-box;
                -webkit-line-clamp: 3; /* 限制最大行数为3 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              &-img{
                max-width: 30%;
                position: absolute;
                height: 68px;
                right: 13%;
                top: 40px;
                transform: translateY(-74px);
              }
            }

            &-bottom{
              position: relative;
              display: flex;
              margin-top: 10px;

              &-item{
                display: flex;
                align-items: center;
                padding-right: 26px;
                cursor: pointer;
                font-size: 14px;

                span{
                  padding-top: 1px;
                  padding-left: 6px;
                }
              }

              &-error{
                position: absolute;
                right: 20px;
                cursor: pointer;
              }
            }
          }
          
          &-top {
            display: flex;
            margin-bottom: 16px;
            
            &-avatar{
              width: 44px;
              height: 44px;
              border-radius: 50%;
              margin-right: 12px;
            }
          }
          
          &-title{
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
          }

          &-shit{
            position: relative;
            display: flex;

            &-content{
              margin-right: 8px;
              width: 68%;
              display: -webkit-box;
              -webkit-line-clamp: 3; /* 限制最大行数为3 */
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            &-img{
              max-width: 30%;
              position: absolute;
              height: 128px;
              right: 16px;
              top: 50%;
              transform: translateY(-74px);
            }

          }

          &-topic{
            margin-top: 16px;
            color: #0052D9;

            span{
              padding-right: 8px;
            }
          }

          &-bottom{
            position: relative;
            display: flex;
            margin-top: 20px;

            &-item{
              display: flex;
              align-items: center;
              padding-right: 26px;
              font-size: 18px;
              cursor: pointer;

              span{
                padding-top: 1px;
                padding-left: 6px;
              }
            }

            &-error{
              position: absolute;
              right: 20px;
              cursor: pointer;
            }
          }

          &-comment{
            height: fit-content;
            min-height: 120px;
            display: flex;
            padding: 0 40px;
            margin-top: 28px;

            &-avatar{
              width: 40px;
              height: 40px;
              margin-right: 14px;
              border-radius: 50%;
            }
            
            &-top{
              border-radius: 20px;
              background-color: #fff;
              margin-bottom: 20px;
              padding: 20px;

              .t-space{
                width: 100%;
              }

              &-btns{
                width: 18%;
              }

              &-bottom{
                width: 100%;
                position: relative;
                margin-top: 12px;

                &-left{
                  display: flex;
                  justify-content: start;
                  align-items: center;

                  &-item{
                    display: flex;
                    align-items: center;
                    margin-right: 8px;
                    cursor: pointer;
                  }
                }

                &-btn{
                  position: absolute;
                  right: 0;
                  bottom: -5px;
                  width: 66px;
                  letter-spacing: 0.08em;
                }
              }
            }
          }
        }
      }
    }
    
    &-sider{
      position: relative;
      top: 56px;
      height: fit-content;
      width: calc(26% - 20px);
      border-radius: 20px;

      &-topic{
        margin-bottom: 20px;
        background-color: #fff;
        padding: 20px;
        border-radius: 20px;

        &-top{
          display: flex;
          justify-content: space-between;

        &-item{
            display: flex;
            align-items: center;

            span{
              margin-left: 6px;
            }
          }
        }

        &-content{
          padding-top: 26px;

          &-item{
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;

            &-name{
              width: 66%;
              text-wrap: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            &-value{
              display: flex;
              align-items: center;

              img{
                width: 16px;
                height: 16px;
              }
            }
          }
        }
      }

      &-sign{
        padding: 20px;
        background-color: #fff;
        border-radius: 20px;
        margin-bottom: 20px;

        &-title{
          display: flex;
          justify-content: center;
          align-items: center;
          letter-spacing: 0.04em;
          margin-bottom: 16px;
        }

        &-content{
          display: flex;
          justify-content: start;
          align-items: center;

          &-city{
            font-size: 18px;
            color: #2c2c2c;
            letter-spacing: 0.12em;
            margin-right: 8px;
            white-space: nowrap;
            margin-left: 10px;
          }

          &-weather{
            font-size: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: 4px;
            padding-right: 30px;

            &-name{
              width: 100%;
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              margin-bottom: 1px;
            }
          }

          &-btn{
            width: 92px;
            height: 33px;
            letter-spacing: 0.16em;
            margin-left: 18px;
          }
        }
      }
    }
  }
}

.del{
  cursor: pointer;
  font-size: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  top: -6px;
  right: -6px;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #D1D5DB;
}

.like-active{
  color: yellow;
}

.star-active{
  color: red;
}

.share-active{
  color: #0052D9;
}

:deep(.t-button__text){
  display: flex;
  align-items: center;
}

:deep(.t-upload__trigger){
  display: flex;
  align-items: center;
}

:deep(.t-upload__single-display-text){
  display: none;
}

:deep(.t-dropdown__item-text){
  display: flex;
}

@media screen and (width <= 767px) {
  .box{
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
  }

  .box-sider{
    width: 0 !important;
    display: none !important;
  }

  .box-main{
    width: 100% !important;
  }

  .t-menu__logo{
    span{
      display: none !important;
    }
  }
}

:deep(.i-icon-double-right){
  margin-left: 0 !important;
}